<template>
  <div class="macau-theme-park-dashboard min-h-screen p-6" 
       :class="themeState.isLight ? 'bg-gradient-to-br from-gray-50 to-gray-100' : 'system-bg'">
    <!-- Header Section -->
    <div class="glass-card p-8 mb-8">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
          <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full flex items-center justify-center mr-6">
            <div class="text-2xl">🎡</div>
          </div>
          <div>
            <h1 class="text-3xl font-bold text-white mb-2">澳门梦幻乐园</h1>
            <p class="text-pink-200">Macau Fantasy Theme Park | 内地巡展嘉年华策划专家</p>
            <div class="flex items-center mt-2">
              <MapPin class="w-4 h-4 text-green-400 mr-2" />
              <span class="text-green-400 text-sm">策划中: 北京、上海、广州、深圳巡展</span>
            </div>
          </div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold text-electric-500">¥385万</div>
          <div class="text-white/70 text-sm">预计总收益 (4城巡展)</div>
          <button 
            @click="openCustomAgent"
            class="mt-4 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-300 flex items-center space-x-2 ml-auto"
          >
            <span>企业定制化agent</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Key Statistics -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-pink-400 mb-2">4</div>
          <div class="text-white/70 text-sm">目标城市</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-purple-400 mb-2">28</div>
          <div class="text-white/70 text-sm">主要景点项目</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-blue-400 mb-2">120天</div>
          <div class="text-white/70 text-sm">巡展总周期</div>
        </div>
        <div class="bg-white/5 rounded-lg p-4 text-center">
          <div class="text-2xl font-bold text-green-400 mb-2">85万</div>
          <div class="text-white/70 text-sm">预计总客流</div>
        </div>
      </div>
    </div>

    <!-- City Tour Planning -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <Calendar class="w-8 h-8 mr-3 text-pink-400" />
        内地巡展城市规划
      </h2>

      <!-- City Tabs -->
      <div class="flex flex-wrap gap-2 mb-6">
        <button 
          v-for="city in cities" 
          :key="city.name"
          @click="selectedCity = city"
          :class="[
            'px-4 py-2 rounded-lg transition-colors',
            selectedCity.name === city.name 
              ? 'bg-pink-500 text-white' 
              : 'bg-white/10 text-white hover:bg-white/20'
          ]"
        >
          {{ city.emoji }} {{ city.name }}
        </button>
      </div>

      <!-- Selected City Details -->
      <div v-if="selectedCity" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- City Information -->
        <div class="space-y-6">
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-xl font-bold text-white mb-4 flex items-center">
              <Building class="w-6 h-6 mr-3 text-pink-400" />
              {{ selectedCity.name }}城市概况
            </h3>
            <div class="grid grid-cols-2 gap-4">
              <div class="text-center">
                <div class="text-2xl font-bold text-pink-400">{{ selectedCity.population }}</div>
                <div class="text-white/70 text-sm">常住人口</div>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-purple-400">{{ selectedCity.touristFlow }}</div>
                <div class="text-white/70 text-sm">年旅游人次</div>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-blue-400">{{ selectedCity.venues }}</div>
                <div class="text-white/70 text-sm">可选场地数</div>
              </div>
              <div class="text-center">
                <div class="text-2xl font-bold text-green-400">{{ selectedCity.expectedRevenue }}</div>
                <div class="text-white/70 text-sm">预期收益</div>
              </div>
            </div>
          </div>

          <!-- Event Requirements -->
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-white font-semibold mb-4 flex items-center">
              <FileText class="w-5 h-5 mr-2 text-blue-400" />
              活动申请要求
            </h3>
            <div class="space-y-3">
              <div v-for="requirement in selectedCity.requirements" :key="requirement.type" 
                   class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                <div class="flex items-center">
                  <div :class="[
                    'w-3 h-3 rounded-full mr-3',
                    requirement.status === 'completed' ? 'bg-green-400' :
                    requirement.status === 'pending' ? 'bg-yellow-400' : 'bg-red-400'
                  ]"></div>
                  <span class="text-white text-sm">{{ requirement.type }}</span>
                </div>
                <div class="text-right">
                  <div class="text-white/70 text-xs">{{ requirement.deadline }}</div>
                  <div :class="[
                    'text-xs font-semibold',
                    requirement.status === 'completed' ? 'text-green-400' :
                    requirement.status === 'pending' ? 'text-yellow-400' : 'text-red-400'
                  ]">
                    {{ requirement.status === 'completed' ? '已完成' :
                       requirement.status === 'pending' ? '进行中' : '待开始' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Venue Analysis -->
        <div class="space-y-6">
          <div class="bg-white/5 rounded-lg p-6">
            <h3 class="text-white font-semibold mb-4 flex items-center">
              <MapPin class="w-5 h-5 mr-2 text-green-400" />
              推荐场地分析
            </h3>
            <div class="space-y-4">
              <div v-for="venue in selectedCity.venues_detail" :key="venue.name" 
                   class="p-4 bg-white/5 rounded-lg">
                <div class="flex items-center justify-between mb-3">
                  <h4 class="text-white font-semibold">{{ venue.name }}</h4>
                  <div class="flex items-center">
                    <Star v-for="n in 5" :key="n" 
                          :class="n <= venue.rating ? 'text-yellow-400' : 'text-gray-400'" 
                          class="w-4 h-4 fill-current" />
                  </div>
                </div>
                <div class="grid grid-cols-2 gap-3 text-sm">
                  <div class="flex items-center justify-between">
                    <span class="text-white/70">面积</span>
                    <span class="text-white">{{ venue.area }}</span>
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="text-white/70">租金</span>
                    <span class="text-white">{{ venue.rent }}</span>
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="text-white/70">交通便利度</span>
                    <span class="text-green-400">{{ venue.transport }}</span>
                  </div>
                  <div class="flex items-center justify-between">
                    <span class="text-white/70">周边商圈</span>
                    <span class="text-blue-400">{{ venue.commercial }}</span>
                  </div>
                </div>
                <div class="mt-3 flex items-center justify-between">
                  <span class="text-white/70 text-xs">可用档期: {{ venue.availability }}</span>
                  <button class="px-3 py-1 bg-pink-500/20 text-pink-300 rounded text-xs">
                    查看详情
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Permit Application Tracker -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <Shield class="w-8 h-8 mr-3 text-green-400" />
        许可证申请进度追踪
      </h2>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Application Status -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">各城市申请状态</h3>
          <div class="space-y-3">
            <div v-for="permit in permitStatus" :key="permit.city" class="p-4 bg-white/5 rounded-lg">
              <div class="flex items-center justify-between mb-3">
                <div class="flex items-center">
                  <span class="text-lg mr-2">{{ permit.emoji }}</span>
                  <span class="text-white font-semibold">{{ permit.city }}</span>
                </div>
                <span :class="[
                  'px-2 py-1 rounded text-xs font-semibold',
                  permit.overall === 'approved' ? 'bg-green-500/20 text-green-300' :
                  permit.overall === 'pending' ? 'bg-yellow-500/20 text-yellow-300' :
                  permit.overall === 'review' ? 'bg-blue-500/20 text-blue-300' : 'bg-red-500/20 text-red-300'
                ]">
                  {{ permit.overall === 'approved' ? '已批准' :
                     permit.overall === 'pending' ? '审核中' :
                     permit.overall === 'review' ? '复审中' : '待申请' }}
                </span>
              </div>
              <div class="space-y-2">
                <div v-for="doc in permit.documents" :key="doc.name" 
                     class="flex items-center justify-between text-sm">
                  <div class="flex items-center">
                    <div :class="[
                      'w-2 h-2 rounded-full mr-2',
                      doc.status === 'approved' ? 'bg-green-400' :
                      doc.status === 'pending' ? 'bg-yellow-400' : 'bg-red-400'
                    ]"></div>
                    <span class="text-white/70">{{ doc.name }}</span>
                  </div>
                  <span class="text-white/70">{{ doc.deadline }}</span>
                </div>
              </div>
              <div class="mt-3">
                <div class="w-full bg-gray-600 rounded-full h-2">
                  <div :class="[
                    'h-2 rounded-full',
                    permit.overall === 'approved' ? 'bg-green-400' :
                    permit.overall === 'pending' ? 'bg-yellow-400' : 'bg-blue-400'
                  ]" :style="`width: ${permit.progress}%`"></div>
                </div>
                <div class="text-white/70 text-xs mt-1">完成度: {{ permit.progress }}%</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Documents Checklist -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-4">所需文件清单</h3>
          <div class="space-y-3">
            <div v-for="category in documentCategories" :key="category.name" 
                 class="p-4 bg-white/5 rounded-lg">
              <h4 class="text-white font-semibold mb-3 flex items-center">
                <component :is="category.icon" class="w-5 h-5 mr-2 text-purple-400" />
                {{ category.name }}
              </h4>
              <div class="space-y-2">
                <div v-for="doc in category.documents" :key="doc.name" 
                     class="flex items-center justify-between">
                  <div class="flex items-center">
                    <div :class="[
                      'w-2 h-2 rounded-full mr-2',
                      doc.completed ? 'bg-green-400' : 'bg-red-400'
                    ]"></div>
                    <span class="text-white/80 text-sm">{{ doc.name }}</span>
                  </div>
                  <div class="text-right">
                    <div class="text-white/70 text-xs">有效期: {{ doc.validity }}</div>
                    <div v-if="!doc.completed" class="text-yellow-400 text-xs">{{ doc.priority }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Event Planning & Logistics -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <Truck class="w-8 h-8 mr-3 text-blue-400" />
        活动策划与物流安排
      </h2>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Equipment Transport -->
        <div class="bg-white/5 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4 flex items-center">
            <Package class="w-5 h-5 mr-2 text-blue-400" />
            设备运输规划
          </h3>
          <div class="space-y-3">
            <div class="p-3 bg-blue-500/10 rounded-lg">
              <div class="flex items-center justify-between mb-2">
                <span class="text-blue-400 font-semibold text-sm">大型游乐设施</span>
                <span class="text-white text-sm">12台</span>
              </div>
              <div class="text-white/80 text-xs">
                预计运输时间: 15天<br>
                运输成本: ¥185万<br>
                特殊许可: 超宽超重运输证
              </div>
            </div>
            <div class="p-3 bg-green-500/10 rounded-lg">
              <div class="flex items-center justify-between mb-2">
                <span class="text-green-400 font-semibold text-sm">中小型设备</span>
                <span class="text-white text-sm">45台</span>
              </div>
              <div class="text-white/80 text-xs">
                预计运输时间: 8天<br>
                运输成本: ¥68万<br>
                标准货运即可
              </div>
            </div>
            <div class="p-3 bg-purple-500/10 rounded-lg">
              <div class="flex items-center justify-between mb-2">
                <span class="text-purple-400 font-semibold text-sm">演出道具</span>
                <span class="text-white text-sm">156件</span>
              </div>
              <div class="text-white/80 text-xs">
                预计运输时间: 3天<br>
                运输成本: ¥22万<br>
                防震包装要求
              </div>
            </div>
          </div>
        </div>

        <!-- Staff Deployment -->
        <div class="bg-white/5 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4 flex items-center">
            <Users class="w-5 h-5 mr-2 text-green-400" />
            人员配置方案
          </h3>
          <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <div>
                <div class="text-white font-semibold text-sm">项目经理</div>
                <div class="text-white/70 text-xs">全程指挥协调</div>
              </div>
              <div class="text-green-400 font-semibold">4人</div>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <div>
                <div class="text-white font-semibold text-sm">设备操作员</div>
                <div class="text-white/70 text-xs">持证上岗</div>
              </div>
              <div class="text-blue-400 font-semibold">28人</div>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <div>
                <div class="text-white font-semibold text-sm">安全监督员</div>
                <div class="text-white/70 text-xs">安全保障</div>
              </div>
              <div class="text-yellow-400 font-semibold">16人</div>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <div>
                <div class="text-white font-semibold text-sm">演艺人员</div>
                <div class="text-white/70 text-xs">表演娱乐</div>
              </div>
              <div class="text-purple-400 font-semibold">35人</div>
            </div>
            <div class="text-center mt-4">
              <div class="text-2xl font-bold text-electric-500">83人</div>
              <div class="text-white/70 text-sm">总人员规模</div>
            </div>
          </div>
        </div>

        <!-- Safety & Insurance -->
        <div class="bg-white/5 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4 flex items-center">
            <Shield class="w-5 h-5 mr-2 text-red-400" />
            安全保障措施
          </h3>
          <div class="space-y-3">
            <div class="p-3 bg-red-500/10 rounded-lg">
              <div class="text-red-400 font-semibold text-sm mb-1">设备安全检测</div>
              <div class="text-white/80 text-xs">
                ✓ 第三方检测机构认证<br>
                ✓ 每日安全检查<br>
                ✓ 应急维修团队24小时待命
              </div>
            </div>
            <div class="p-3 bg-orange-500/10 rounded-lg">
              <div class="text-orange-400 font-semibold text-sm mb-1">保险覆盖</div>
              <div class="text-white/80 text-xs">
                ✓ 公众责任险 ¥500万<br>
                ✓ 设备财产险 ¥2000万<br>
                ✓ 雇主责任险 ¥200万
              </div>
            </div>
            <div class="p-3 bg-green-500/10 rounded-lg">
              <div class="text-green-400 font-semibold text-sm mb-1">应急预案</div>
              <div class="text-white/80 text-xs">
                ✓ 医疗救护站点设置<br>
                ✓ 消防安全通道规划<br>
                ✓ 人流疏导预案
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能操作面板 -->
    <div class="glass-card p-8 mb-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <Calendar class="w-8 h-8 mr-3 text-pink-400" />
        智能活动管理系统
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 许可申请 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">许可申请</h3>
          <div class="space-y-2">
            <button @click="oneClickApplication" class="w-full px-4 py-3 bg-purple-500/20 text-purple-300 rounded-lg hover:bg-purple-500/30 transition-colors flex items-center">
              <FileText class="w-4 h-4 mr-2" />
              一键申请文件
            </button>
            <button @click="trackProgress" class="w-full px-4 py-3 bg-pink-500/20 text-pink-300 rounded-lg hover:bg-pink-500/30 transition-colors flex items-center">
              <Clock class="w-4 h-4 mr-2" />
              进度实时跟踪
            </button>
            <button @click="assessApprovalRisk" class="w-full px-4 py-3 bg-violet-500/20 text-violet-300 rounded-lg hover:bg-violet-500/30 transition-colors flex items-center">
              <AlertTriangle class="w-4 h-4 mr-2" />
              审批风险评估
            </button>
          </div>
        </div>

        <!-- 场地管理 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">场地管理</h3>
          <div class="space-y-2">
            <button @click="venueBookingSystem" class="w-full px-4 py-3 bg-blue-500/20 text-blue-300 rounded-lg hover:bg-blue-500/30 transition-colors flex items-center">
              <MapPin class="w-4 h-4 mr-2" />
              场地预订系统
            </button>
            <button @click="venueCompatibilityAnalysis" class="w-full px-4 py-3 bg-indigo-500/20 text-indigo-300 rounded-lg hover:bg-indigo-500/30 transition-colors flex items-center">
              <Building class="w-4 h-4 mr-2" />
              场馆适配分析
            </button>
            <button @click="venueEvaluationReport" class="w-full px-4 py-3 bg-cyan-500/20 text-cyan-300 rounded-lg hover:bg-cyan-500/30 transition-colors flex items-center">
              <Star class="w-4 h-4 mr-2" />
              场地评估报告
            </button>
          </div>
        </div>

        <!-- 物流协调 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">物流协调</h3>
          <div class="space-y-2">
            <button @click="transportRoutePlanning" class="w-full px-4 py-3 bg-green-500/20 text-green-300 rounded-lg hover:bg-green-500/30 transition-colors flex items-center">
              <Truck class="w-4 h-4 mr-2" />
              运输路线规划
            </button>
            <button @click="equipmentInventoryManagement" class="w-full px-4 py-3 bg-emerald-500/20 text-emerald-300 rounded-lg hover:bg-emerald-500/30 transition-colors flex items-center">
              <Package class="w-4 h-4 mr-2" />
              设备清单管理
            </button>
            <button @click="timeSchedulePlanning" class="w-full px-4 py-3 bg-teal-500/20 text-teal-300 rounded-lg hover:bg-teal-500/30 transition-colors flex items-center">
              <Calendar class="w-4 h-4 mr-2" />
              时间进度安排
            </button>
          </div>
        </div>

        <!-- 风险管控 -->
        <div class="space-y-4">
          <h3 class="text-white font-semibold mb-3">风险管控</h3>
          <div class="space-y-2">
            <button @click="safetyInspectionSystem" class="w-full px-4 py-3 bg-red-500/20 text-red-300 rounded-lg hover:bg-red-500/30 transition-colors flex items-center">
              <Shield class="w-4 h-4 mr-2" />
              安全检查系统
            </button>
            <button @click="emergencyPlanDevelopment" class="w-full px-4 py-3 bg-orange-500/20 text-orange-300 rounded-lg hover:bg-orange-500/30 transition-colors flex items-center">
              <AlertTriangle class="w-4 h-4 mr-2" />
              应急预案制定
            </button>
            <button @click="insuranceConfigurationManagement" class="w-full px-4 py-3 bg-yellow-500/20 text-yellow-300 rounded-lg hover:bg-yellow-500/30 transition-colors flex items-center">
              <Users class="w-4 h-4 mr-2" />
              保险配置管理
            </button>
          </div>
        </div>
      </div>

      <!-- 智能推荐 -->
      <div class="mt-8 pt-6 border-t border-white/20">
        <h3 class="text-white font-semibold mb-4">智能助手</h3>
        <div class="flex flex-wrap gap-3">
          <button @click="bestVenueRecommendation" class="px-4 py-2 bg-gradient-to-r from-purple-500/20 to-pink-500/20 text-white rounded-lg hover:from-purple-500/30 hover:to-pink-500/30 transition-all">
            <Star class="w-4 h-4 mr-2 inline" />
            最佳场地推荐
          </button>
          <button @click="eventTimeOptimization" class="px-4 py-2 bg-gradient-to-r from-blue-500/20 to-indigo-500/20 text-white rounded-lg hover:from-blue-500/30 hover:to-indigo-500/30 transition-all">
            <Calendar class="w-4 h-4 mr-2 inline" />
            活动时间优化
          </button>
          <button @click="costBudgetAnalysis" class="px-4 py-2 bg-gradient-to-r from-green-500/20 to-emerald-500/20 text-white rounded-lg hover:from-green-500/30 hover:to-emerald-500/30 transition-all">
            <DollarSign class="w-4 h-4 mr-2 inline" />
            成本预算分析
          </button>
          <button @click="generateComprehensiveReport" class="px-4 py-2 bg-gradient-to-r from-yellow-500/20 to-orange-500/20 text-white rounded-lg hover:from-yellow-500/30 hover:to-orange-500/30 transition-all">
            <FileText class="w-4 h-4 mr-2 inline" />
            生成综合报告
          </button>
        </div>
      </div>
    </div>

    <!-- 通知系统 -->
    <div class="fixed top-4 right-4 z-50 space-y-2">
      <div 
        v-for="notification in notifications" 
        :key="notification.id"
        class="max-w-sm p-4 rounded-lg shadow-lg backdrop-blur-md border transition-all duration-300 transform"
        :class="{
          'bg-blue-500/20 border-blue-500/50 text-blue-300': notification.type === 'info',
          'bg-green-500/20 border-green-500/50 text-green-300': notification.type === 'success',
          'bg-yellow-500/20 border-yellow-500/50 text-yellow-300': notification.type === 'warning',
          'bg-red-500/20 border-red-500/50 text-red-300': notification.type === 'error'
        }"
      >
        <div class="flex items-start justify-between">
          <div class="flex-1">
            <p class="text-sm font-medium">{{ notification.message }}</p>
            <p class="text-xs opacity-75 mt-1">{{ notification.timestamp }}</p>
          </div>
          <button 
            @click="notifications.splice(notifications.indexOf(notification), 1)"
            class="ml-2 text-current opacity-75 hover:opacity-100"
          >
            ×
          </button>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="isLoading" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
      <div class="bg-white/10 backdrop-blur-md p-8 rounded-lg border border-white/20 text-center">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-pink-500 mx-auto mb-4"></div>
        <p class="text-white">处理中...</p>
      </div>
    </div>

    <!-- 模态框 -->
    <div v-if="showModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click="closeModal">
      <div class="bg-gray-900/95 backdrop-blur-md rounded-lg border border-white/20 max-w-6xl w-full max-h-[90vh] overflow-y-auto" @click.stop>
        <div class="p-6">
          <div class="flex items-center justify-between mb-6">
            <h2 class="text-2xl font-bold text-white">{{ modalContent.title }}</h2>
            <button @click="closeModal" class="text-gray-400 hover:text-white text-2xl">×</button>
          </div>
          
          <!-- 一键申请模态框 -->
          <div v-if="modalContent.type === 'application'" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div v-for="app in modalContent.data.availableApplications" :key="app.city" 
                   class="bg-white/5 rounded-lg p-6 border border-white/10">
                <div class="flex items-center justify-between mb-4">
                  <h3 class="text-white font-semibold text-lg">{{ app.city }}</h3>
                  <span class="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-sm">
                    可申请
                  </span>
                </div>
                <div class="space-y-3 mb-4">
                  <div class="text-white/70 text-sm">
                    <strong>所需文件：</strong>
                    <ul class="mt-1 ml-4">
                      <li v-for="doc in app.documents" :key="doc" class="list-disc">{{ doc }}</li>
                    </ul>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-white/70">预计时间：</span>
                    <span class="text-white">{{ app.estimatedTime }}</span>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-white/70">申请费用：</span>
                    <span class="text-white">{{ app.cost }}</span>
                  </div>
                </div>
                <button 
                  @click="alert(`${app.city}申请已提交！\n预计${app.estimatedTime}完成审批\n费用：${app.cost}`)"
                  class="w-full px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600">
                  立即申请
                </button>
              </div>
            </div>
          </div>

          <!-- 审批风险评估模态框 -->
          <div v-if="modalContent.type === 'risk_assessment'" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div v-for="risk in modalContent.data.riskAnalysis" :key="risk.city" 
                   class="bg-white/5 rounded-lg p-6 border-l-4" 
                   :class="{
                     'border-red-500': risk.riskLevel === 'high',
                     'border-yellow-500': risk.riskLevel === 'medium',
                     'border-green-500': risk.riskLevel === 'low'
                   }">
                <div class="flex items-center justify-between mb-4">
                  <h3 class="text-white font-semibold">{{ risk.city }}</h3>
                  <div class="flex items-center space-x-2">
                    <span class="px-2 py-1 rounded text-xs font-semibold" 
                          :class="{
                            'bg-red-500/20 text-red-300': risk.riskLevel === 'high',
                            'bg-yellow-500/20 text-yellow-300': risk.riskLevel === 'medium',
                            'bg-green-500/20 text-green-300': risk.riskLevel === 'low'
                          }">
                      {{ risk.riskLevel === 'high' ? '高风险' : risk.riskLevel === 'medium' ? '中风险' : '低风险' }}
                    </span>
                    <span class="text-white font-bold">{{ risk.successRate }}</span>
                  </div>
                </div>
                
                <div class="space-y-3">
                  <div>
                    <h4 class="text-white/80 font-medium mb-2">风险因素：</h4>
                    <ul class="space-y-1">
                      <li v-for="factor in risk.factors" :key="factor" 
                          class="text-white/70 text-sm flex items-start">
                        <span class="text-red-400 mr-2">•</span>
                        {{ factor }}
                      </li>
                    </ul>
                  </div>
                  <div>
                    <h4 class="text-white/80 font-medium mb-2">建议措施：</h4>
                    <ul class="space-y-1">
                      <li v-for="rec in risk.recommendations" :key="rec" 
                          class="text-white/70 text-sm flex items-start">
                        <span class="text-green-400 mr-2">•</span>
                        {{ rec }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 场地预订模态框 -->
          <div v-if="modalContent.type === 'venue_booking'" class="space-y-6">
            <div v-for="cityData in modalContent.data.availableVenues" :key="cityData.city">
              <h3 class="text-white font-semibold text-lg mb-4">{{ cityData.city }}</h3>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div v-for="venue in cityData.venues" :key="venue.name" 
                     class="bg-white/5 rounded-lg p-4 border border-white/10">
                  <div class="flex items-center justify-between mb-3">
                    <h4 class="text-white font-medium">{{ venue.name }}</h4>
                    <div class="flex items-center">
                      <div class="flex">
                        <Star v-for="star in venue.rating" :key="star" 
                              class="w-4 h-4 text-yellow-400 fill-current" />
                      </div>
                      <span class="ml-2 px-2 py-1 rounded text-xs" 
                            :class="venue.available ? 'bg-green-500/20 text-green-300' : 'bg-red-500/20 text-red-300'">
                        {{ venue.available ? '可预订' : '已满' }}
                      </span>
                    </div>
                  </div>
                  <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                      <span class="text-white/70">面积：</span>
                      <span class="text-white">{{ venue.area }}</span>
                    </div>
                    <div class="flex justify-between">
                      <span class="text-white/70">租金：</span>
                      <span class="text-white">{{ venue.rent }}</span>
                    </div>
                    <div class="flex justify-between">
                      <span class="text-white/70">可用时间：</span>
                      <span class="text-white">{{ venue.availability }}</span>
                    </div>
                    <div>
                      <span class="text-white/70">特色：</span>
                      <div class="flex flex-wrap gap-1 mt-1">
                        <span v-for="feature in venue.features" :key="feature" 
                              class="px-2 py-1 bg-blue-500/20 text-blue-300 rounded-full text-xs">
                          {{ feature }}
                        </span>
                      </div>
                    </div>
                  </div>
                  <button v-if="venue.available" 
                          @click="alert(`${venue.name}预订成功！\n时间：${venue.availability}\n费用：${venue.rent}`)" 
                          class="w-full mt-3 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
                    立即预订
                  </button>
                  <button v-else class="w-full mt-3 px-4 py-2 bg-gray-500 text-white rounded-lg cursor-not-allowed" disabled>
                    暂不可预订
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 运输路线规划模态框 -->
          <div v-if="modalContent.type === 'transport_route'" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div v-for="route in modalContent.data.routes" :key="route.to" 
                   class="bg-white/5 rounded-lg p-6 border border-white/10">
                <div class="flex items-center justify-between mb-4">
                  <h3 class="text-white font-semibold">{{ route.from }} → {{ route.to }}</h3>
                  <span class="px-2 py-1 rounded text-xs" 
                        :class="{
                          'bg-green-500/20 text-green-300': route.riskLevel === 'low',
                          'bg-yellow-500/20 text-yellow-300': route.riskLevel === 'medium',
                          'bg-red-500/20 text-red-300': route.riskLevel === 'high'
                        }">
                    {{ route.riskLevel === 'low' ? '低风险' : route.riskLevel === 'medium' ? '中风险' : '高风险' }}
                  </span>
                </div>
                <div class="space-y-3">
                  <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span class="text-white/70">距离：</span>
                      <span class="text-white ml-2">{{ route.distance }}</span>
                    </div>
                    <div>
                      <span class="text-white/70">用时：</span>
                      <span class="text-white ml-2">{{ route.estimatedTime }}</span>
                    </div>
                    <div>
                      <span class="text-white/70">费用：</span>
                      <span class="text-white ml-2">{{ route.cost }}</span>
                    </div>
                  </div>
                  <div>
                    <p class="text-white/70 text-sm mb-1">路线：</p>
                    <p class="text-white text-sm">{{ route.route }}</p>
                  </div>
                  <div>
                    <p class="text-white/70 text-sm mb-1">特殊要求：</p>
                    <ul class="space-y-1">
                      <li v-for="req in route.specialRequirements" :key="req" 
                          class="text-white/70 text-sm flex items-start">
                        <span class="text-yellow-400 mr-2">•</span>
                        {{ req }}
                      </li>
                    </ul>
                  </div>
                </div>
                <button 
                  @click="alert(`${route.to}运输方案确认！\n预计费用：${route.cost}\n预计时间：${route.estimatedTime}`)"
                  class="w-full mt-4 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
                  选择此路线
                </button>
              </div>
            </div>
          </div>

          <!-- 安全检查模态框 -->
          <div v-if="modalContent.type === 'safety_inspection'" class="space-y-6">
            <div class="text-center mb-6">
              <div class="text-4xl font-bold text-white mb-2">{{ modalContent.data.overallScore }}%</div>
              <p class="text-white/70">总体安全评分</p>
            </div>
            <div class="space-y-4">
              <div v-for="category in modalContent.data.inspectionItems" :key="category.category" 
                   class="bg-white/5 rounded-lg p-4">
                <h3 class="text-white font-semibold mb-3">{{ category.category }}</h3>
                <div class="space-y-2">
                  <div v-for="item in category.items" :key="item.name" 
                       class="flex items-center justify-between p-2 bg-white/5 rounded">
                    <span class="text-white/80 text-sm">{{ item.name }}</span>
                    <div class="flex items-center space-x-2">
                      <span v-if="item.status === 'completed'" 
                            class="text-green-400 font-bold">{{ item.score }}%</span>
                      <span v-else class="text-yellow-400 text-sm">待检查</span>
                      <div class="w-2 h-2 rounded-full" 
                           :class="{
                             'bg-green-400': item.status === 'completed',
                             'bg-yellow-400': item.status === 'pending',
                             'bg-red-400': item.status === 'failed'
                           }"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bg-white/5 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-3">改进建议</h3>
              <ul class="space-y-2">
                <li v-for="rec in modalContent.data.recommendations" :key="rec" 
                    class="text-white/80 text-sm flex items-start">
                  <span class="text-blue-400 mr-2">•</span>
                  {{ rec }}
                </li>
              </ul>
            </div>
          </div>

          <!-- 保险配置模态框 -->
          <div v-if="modalContent.type === 'insurance_config'" class="space-y-6">
            <div class="text-center mb-6">
              <div class="text-3xl font-bold text-green-400 mb-2">{{ modalContent.data.totalCoverage }}</div>
              <p class="text-white/70">总保障金额</p>
              <div class="text-xl font-bold text-white mt-2">年保费：{{ modalContent.data.totalPremium }}</div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div v-for="insurance in modalContent.data.insurancePackages" :key="insurance.type" 
                   class="bg-white/5 rounded-lg p-4 border border-white/10">
                <div class="flex items-center justify-between mb-3">
                  <h3 class="text-white font-semibold">{{ insurance.type }}</h3>
                  <span class="px-2 py-1 rounded text-xs" 
                        :class="{
                          'bg-green-500/20 text-green-300': insurance.status === 'active',
                          'bg-yellow-500/20 text-yellow-300': insurance.status === 'pending',
                          'bg-red-500/20 text-red-300': insurance.status === 'expired'
                        }">
                    {{ insurance.status === 'active' ? '生效中' : insurance.status === 'pending' ? '申请中' : '已过期' }}
                  </span>
                </div>
                <div class="space-y-2 text-sm">
                  <div class="flex justify-between">
                    <span class="text-white/70">保障金额：</span>
                    <span class="text-white">{{ insurance.coverage }}</span>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-white/70">年保费：</span>
                    <span class="text-white">{{ insurance.premium }}</span>
                  </div>
                  <div class="flex justify-between">
                    <span class="text-white/70">承保公司：</span>
                    <span class="text-white">{{ insurance.provider }}</span>
                  </div>
                  <div>
                    <span class="text-white/70">保障范围：</span>
                    <p class="text-white/80 text-xs mt-1">{{ insurance.scope }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="bg-white/5 rounded-lg p-4">
              <h3 class="text-white font-semibold mb-3">专家建议</h3>
              <ul class="space-y-2">
                <li v-for="rec in modalContent.data.recommendations" :key="rec" 
                    class="text-white/80 text-sm flex items-start">
                  <span class="text-blue-400 mr-2">•</span>
                  {{ rec }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Financial Analysis -->
    <div class="glass-card p-8">
      <h2 class="text-2xl font-bold text-white mb-6 flex items-center">
        <DollarSign class="w-8 h-8 mr-3 text-green-400" />
        财务分析与收益预测
      </h2>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Cost Breakdown -->
        <div class="bg-white/5 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4">成本分析 (4城巡展)</h3>
          <div class="space-y-3">
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span class="text-white/70">设备运输费</span>
              <span class="text-white font-semibold">¥275万</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span class="text-white/70">场地租赁费</span>
              <span class="text-white font-semibold">¥168万</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span class="text-white/70">人员工资</span>
              <span class="text-white font-semibold">¥95万</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span class="text-white/70">许可证申请费</span>
              <span class="text-white font-semibold">¥35万</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span class="text-white/70">安全保险费</span>
              <span class="text-white font-semibold">¥42万</span>
            </div>
            <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
              <span class="text-white/70">营销推广费</span>
              <span class="text-white font-semibold">¥88万</span>
            </div>
            <div class="border-t border-white/20 pt-3">
              <div class="flex items-center justify-between">
                <span class="text-white font-semibold">总成本</span>
                <span class="text-red-400 font-bold text-xl">¥703万</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Revenue Projection -->
        <div class="bg-white/5 rounded-lg p-6">
          <h3 class="text-white font-semibold mb-4">收益预测</h3>
          <div class="space-y-4">
            <div class="text-center">
              <div class="text-4xl font-bold text-green-400 mb-2">¥1,088万</div>
              <div class="text-white/70">预计总收入</div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div class="text-center p-3 bg-blue-500/10 rounded-lg">
                <div class="text-2xl font-bold text-blue-400">85万</div>
                <div class="text-white/70 text-sm">预计总客流</div>
              </div>
              <div class="text-center p-3 bg-purple-500/10 rounded-lg">
                <div class="text-2xl font-bold text-purple-400">¥128</div>
                <div class="text-white/70 text-sm">平均客单价</div>
              </div>
            </div>
            <div class="space-y-2">
              <div class="flex items-center justify-between">
                <span class="text-white/70 text-sm">门票收入</span>
                <span class="text-white">¥680万</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70 text-sm">餐饮收入</span>
                <span class="text-white">¥245万</span>
              </div>
              <div class="flex items-center justify-between">
                <span class="text-white/70 text-sm">纪念品收入</span>
                <span class="text-white">¥163万</span>
              </div>
            </div>
            <div class="border-t border-white/20 pt-3">
              <div class="text-center">
                <div class="text-3xl font-bold text-green-400">¥385万</div>
                <div class="text-white/70">净利润</div>
                <div class="text-green-400 text-sm">利润率: 35.4%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { themeState } from '../services/themeService.js'
import {
  MapPin,
  Calendar,
  Building,
  FileText,
  Star,
  Shield,
  CheckCircle,
  Clock,
  Truck,
  Package,
  Users,
  DollarSign,
  AlertTriangle
} from 'lucide-vue-next'

export default {
  name: 'MacauThemeParkDashboard',
  components: {
    MapPin,
    Calendar,
    Building,
    FileText,
    Star,
    Shield,
    CheckCircle,
    Clock,
    Truck,
    Package,
    Users,
    DollarSign,
    AlertTriangle
  },
  
  setup() {
    const selectedCity = ref(null)
    const notifications = ref([])
    const isLoading = ref(false)
    const showModal = ref(false)
    const modalContent = ref(null)

    // 通知系统
    const addNotification = (message, type = 'info') => {
      const notification = {
        id: Date.now(),
        message,
        type,
        timestamp: new Date().toLocaleTimeString()
      }
      notifications.value.unshift(notification)
      
      setTimeout(() => {
        const index = notifications.value.findIndex(n => n.id === notification.id)
        if (index > -1) {
          notifications.value.splice(index, 1)
        }
      }, 5000)
    }
    
    const cities = reactive([
      {
        name: '北京',
        emoji: '🏛️',
        population: '2,188万',
        touristFlow: '3.2亿人次',
        venues: '18个',
        expectedRevenue: '¥125万',
        requirements: [
          { type: '大型活动审批', deadline: '提前60天', status: 'completed' },
          { type: '消防安全审核', deadline: '提前30天', status: 'pending' },
          { type: '文化活动备案', deadline: '提前15天', status: 'not_started' },
          { type: '环保评估报告', deadline: '提前45天', status: 'pending' }
        ],
        venues_detail: [
          {
            name: '朝阳公园',
            area: '2.8万㎡',
            rent: '¥45万/月',
            transport: '地铁直达',
            commercial: '蓝色港湾',
            availability: '4-6月',
            rating: 5
          },
          {
            name: '奥林匹克公园',
            area: '3.5万㎡',
            rent: '¥68万/月',
            transport: '多线换乘',
            commercial: '水立方周边',
            availability: '5-7月',
            rating: 5
          },
          {
            name: '世纪公园',
            area: '2.2万㎡',
            rent: '¥38万/月',
            transport: '公交便利',
            commercial: '国贸商圈',
            availability: '3-5月',
            rating: 4
          }
        ]
      },
      {
        name: '上海',
        emoji: '🏙️',
        population: '2,489万',
        touristFlow: '3.6亿人次',
        venues: '22个',
        expectedRevenue: '¥145万',
        requirements: [
          { type: '大型活动审批', deadline: '提前45天', status: 'completed' },
          { type: '消防安全审核', deadline: '提前30天', status: 'completed' },
          { type: '文化活动备案', deadline: '提前15天', status: 'pending' },
          { type: '环保评估报告', deadline: '提前30天', status: 'completed' }
        ],
        venues_detail: [
          {
            name: '世纪公园',
            area: '4.2万㎡',
            rent: '¥72万/月',
            transport: '地铁2号线',
            commercial: '陆家嘴',
            availability: '3-5月',
            rating: 5
          },
          {
            name: '上海展览中心',
            area: '3.8万㎡',
            rent: '¥85万/月',
            transport: '地铁2/7号线',
            commercial: '南京西路',
            availability: '4-6月',
            rating: 5
          },
          {
            name: '滨江森林公园',
            area: '5.5万㎡',
            rent: '¥65万/月',
            transport: '地铁6号线',
            commercial: '外高桥',
            availability: '5-7月',
            rating: 4
          }
        ]
      },
      {
        name: '广州',
        emoji: '🌸',
        population: '1,881万',
        touristFlow: '2.5亿人次',
        venues: '15个',
        expectedRevenue: '¥98万',
        requirements: [
          { type: '大型活动审批', deadline: '提前30天', status: 'pending' },
          { type: '消防安全审核', deadline: '提前20天', status: 'not_started' },
          { type: '文化活动备案', deadline: '提前10天', status: 'not_started' },
          { type: '环保评估报告', deadline: '提前25天', status: 'not_started' }
        ],
        venues_detail: [
          {
            name: '广州塔广场',
            area: '3.2万㎡',
            rent: '¥58万/月',
            transport: '地铁3号线',
            commercial: '珠江新城',
            availability: '6-8月',
            rating: 5
          },
          {
            name: '海心沙',
            area: '4.8万㎡',
            rent: '¥62万/月',
            transport: '地铁5号线',
            commercial: 'CBD核心区',
            availability: '7-9月',
            rating: 4
          }
        ]
      },
      {
        name: '深圳',
        emoji: '🏢',
        population: '1,756万',
        touristFlow: '1.9亿人次',
        venues: '12个',
        expectedRevenue: '¥117万',
        requirements: [
          { type: '大型活动审批', deadline: '提前30天', status: 'not_started' },
          { type: '消防安全审核', deadline: '提前20天', status: 'not_started' },
          { type: '文化活动备案', deadline: '提前10天', status: 'not_started' },
          { type: '环保评估报告', deadline: '提前25天', status: 'not_started' }
        ],
        venues_detail: [
          {
            name: '深圳湾公园',
            area: '6.2万㎡',
            rent: '¥48万/月',
            transport: '地铁2号线',
            commercial: '后海商圈',
            availability: '8-10月',
            rating: 5
          },
          {
            name: '欢乐海岸',
            area: '2.8万㎡',
            rent: '¥55万/月',
            transport: '地铁1/9号线',
            commercial: '华侨城',
            availability: '9-11月',
            rating: 4
          }
        ]
      }
    ])

    const permitStatus = reactive([
      {
        city: '北京',
        emoji: '🏛️',
        overall: 'pending',
        progress: 75,
        documents: [
          { name: '大型活动申请表', status: 'approved', deadline: '已完成' },
          { name: '消防安全评估', status: 'pending', deadline: '2周内' },
          { name: '环保影响报告', status: 'pending', deadline: '3周内' },
          { name: '交通疏导方案', status: 'approved', deadline: '已完成' }
        ]
      },
      {
        city: '上海',
        emoji: '🏙️',
        overall: 'approved',
        progress: 95,
        documents: [
          { name: '大型活动申请表', status: 'approved', deadline: '已完成' },
          { name: '消防安全评估', status: 'approved', deadline: '已完成' },
          { name: '环保影响报告', status: 'approved', deadline: '已完成' },
          { name: '交通疏导方案', status: 'pending', deadline: '1周内' }
        ]
      },
      {
        city: '广州',
        emoji: '🌸',
        overall: 'review',
        progress: 45,
        documents: [
          { name: '大型活动申请表', status: 'pending', deadline: '2周内' },
          { name: '消防安全评估', status: 'not_started', deadline: '4周内' },
          { name: '环保影响报告', status: 'not_started', deadline: '5周内' },
          { name: '交通疏导方案', status: 'not_started', deadline: '3周内' }
        ]
      },
      {
        city: '深圳',
        emoji: '🏢',
        overall: 'not_started',
        progress: 10,
        documents: [
          { name: '大型活动申请表', status: 'not_started', deadline: '6周内' },
          { name: '消防安全评估', status: 'not_started', deadline: '8周内' },
          { name: '环保影响报告', status: 'not_started', deadline: '9周内' },
          { name: '交通疏导方案', status: 'not_started', deadline: '7周内' }
        ]
      }
    ])

    const documentCategories = reactive([
      {
        name: '基础申请文件',
        icon: 'FileText',
        documents: [
          { name: '营业执照副本', completed: true, validity: '长期有效', priority: '' },
          { name: '澳门公司注册证明', completed: true, validity: '2025.12', priority: '' },
          { name: '税务登记证', completed: true, validity: '2025.08', priority: '' },
          { name: '大型活动组织资质', completed: false, validity: '需申请', priority: '高优先级' }
        ]
      },
      {
        name: '安全保障文件',
        icon: 'Shield',
        documents: [
          { name: '设备安全检测报告', completed: true, validity: '2024.12', priority: '' },
          { name: '消防安全预案', completed: false, validity: '每次申请', priority: '高优先级' },
          { name: '应急救援方案', completed: false, validity: '每次申请', priority: '中优先级' },
          { name: '公众责任保险', completed: true, validity: '2025.06', priority: '' }
        ]
      },
      {
        name: '专业认证文件',
        icon: 'CheckCircle',
        documents: [
          { name: '游乐设施运营许可', completed: true, validity: '2025.10', priority: '' },
          { name: '特种设备检验证书', completed: false, validity: '需年检', priority: '高优先级' },
          { name: '从业人员资格证', completed: true, validity: '2025.03', priority: '' },
          { name: '环保合规证明', completed: false, validity: '每次申请', priority: '中优先级' }
        ]
      }
    ])

    // 许可申请功能
    const oneClickApplication = async () => {
      isLoading.value = true
      addNotification('正在启动一键申请流程...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '一键申请文件',
          type: 'application',
          data: {
            availableApplications: [
              {
                city: '北京',
                documents: ['大型活动申请表', '消防安全评估', '环保影响报告'],
                estimatedTime: '7-10个工作日',
                cost: '¥12,000',
                status: 'ready'
              },
              {
                city: '上海',
                documents: ['大型活动申请表', '消防安全评估', '环保影响报告'],
                estimatedTime: '5-7个工作日',
                cost: '¥15,000',
                status: 'ready'
              },
              {
                city: '广州',
                documents: ['大型活动申请表', '消防安全评估', '环保影响报告'],
                estimatedTime: '10-14个工作日',
                cost: '¥8,000',
                status: 'ready'
              },
              {
                city: '深圳',
                documents: ['大型活动申请表', '消防安全评估', '环保影响报告'],
                estimatedTime: '8-12个工作日',
                cost: '¥10,000',
                status: 'ready'
              }
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 2000)
    }

    const trackProgress = () => {
      window.location.href = '#/user-center?tab=permits'
      addNotification('正在打开许可申请进度跟踪系统...', 'info')
    }

    const assessApprovalRisk = async () => {
      isLoading.value = true
      addNotification('正在分析审批风险...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '审批风险评估',
          type: 'risk_assessment',
          data: {
            riskAnalysis: [
              {
                city: '北京',
                riskLevel: 'medium',
                factors: [
                  '春节前后申请量激增',
                  '环保要求较严格',
                  '交通疏导要求复杂'
                ],
                recommendations: [
                  '提前45天申请',
                  '准备详细环保方案',
                  '联系专业交通咨询公司'
                ],
                successRate: '78%'
              },
              {
                city: '上海',
                riskLevel: 'low',
                factors: [
                  '流程标准化程度高',
                  '政府服务效率高',
                  '前期准备充分'
                ],
                recommendations: [
                  '按标准流程申请',
                  '重点关注消防安全',
                  '提前预约现场检查'
                ],
                successRate: '92%'
              },
              {
                city: '广州',
                riskLevel: 'high',
                factors: [
                  '当地政策调整频繁',
                  '审批流程复杂',
                  '环保要求不断提高'
                ],
                recommendations: [
                  '寻找本地合作伙伴',
                  '提前咨询政府部门',
                  '准备多套备用方案'
                ],
                successRate: '65%'
              },
              {
                city: '深圳',
                riskLevel: 'medium',
                factors: [
                  '创新项目鼓励政策',
                  '但安全要求严格',
                  '竞争激烈'
                ],
                recommendations: [
                  '强调项目创新性',
                  '加强安全保障措施',
                  '提前预约各部门'
                ],
                successRate: '73%'
              }
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 2500)
    }

    // 场地管理功能
    const venueBookingSystem = async () => {
      isLoading.value = true
      addNotification('正在连接场地预订系统...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '场地预订系统',
          type: 'venue_booking',
          data: {
            availableVenues: [
              {
                city: '北京',
                venues: [
                  {
                    name: '朝阳公园',
                    area: '2.8万㎡',
                    rent: '¥45万/月',
                    availability: '2025年4-6月',
                    features: ['地铁直达', '停车便利', '人流量大'],
                    rating: 5,
                    available: true
                  },
                  {
                    name: '奥林匹克公园',
                    area: '3.5万㎡',
                    rent: '¥68万/月',
                    availability: '2025年5-7月',
                    features: ['多线换乘', '知名度高', '配套完善'],
                    rating: 5,
                    available: true
                  }
                ]
              },
              {
                city: '上海',
                venues: [
                  {
                    name: '世纪公园',
                    area: '4.2万㎡',
                    rent: '¥72万/月',
                    availability: '2025年3-5月',
                    features: ['地铁直达', '景观优美', '配套齐全'],
                    rating: 5,
                    available: true
                  },
                  {
                    name: '上海展览中心',
                    area: '3.8万㎡',
                    rent: '¥85万/月',
                    availability: '2025年4-6月',
                    features: ['交通便利', '专业设施', '服务完善'],
                    rating: 5,
                    available: false
                  }
                ]
              }
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 1800)
    }

    const venueCompatibilityAnalysis = async () => {
      isLoading.value = true
      addNotification('正在分析场馆适配性...', 'info')
      
      setTimeout(() => {
        alert('场馆适配性分析完成！\n\n分析结果：\n• 北京朝阳公园 - 适配度95%\n• 上海世纪公园 - 适配度92%\n• 广州塔广场 - 适配度88%\n• 深圳湾公园 - 适配度90%\n\n详细报告已发送至您的邮箱')
        isLoading.value = false
        addNotification('场馆适配性分析报告已生成', 'success')
      }, 2200)
    }

    const venueEvaluationReport = async () => {
      isLoading.value = true
      addNotification('正在生成场地评估报告...', 'info')
      
      setTimeout(() => {
        const evaluationReport = {
          reportDate: new Date().toLocaleDateString(),
          venues: [
            {
              name: '朝阳公园',
              city: '北京',
              overallScore: 95,
              criteria: {
                location: 98,
                facilities: 92,
                transport: 96,
                cost: 85
              },
              pros: ['地理位置优越', '交通便利', '知名度高'],
              cons: ['租金较高', '竞争激烈']
            },
            {
              name: '世纪公园',
              city: '上海',
              overallScore: 92,
              criteria: {
                location: 95,
                facilities: 90,
                transport: 94,
                cost: 82
              },
              pros: ['环境优美', '配套完善', '客流稳定'],
              cons: ['成本较高', '申请周期长']
            }
          ]
        }
        
        const blob = new Blob([JSON.stringify(evaluationReport, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `场地评估报告_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('场地评估报告已生成并下载', 'success')
      }, 2000)
    }

    // 物流协调功能
    const transportRoutePlanning = async () => {
      isLoading.value = true
      addNotification('正在规划最优运输路线...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '运输路线规划',
          type: 'transport_route',
          data: {
            routes: [
              {
                from: '澳门',
                to: '北京',
                distance: '2,100公里',
                estimatedTime: '15天',
                cost: '¥68万',
                route: '澳门→广州→长沙→郑州→北京',
                specialRequirements: ['超宽超重运输许可', '沿途检查站报备'],
                riskLevel: 'medium'
              },
              {
                from: '澳门',
                to: '上海',
                distance: '1,800公里',
                estimatedTime: '12天',
                cost: '¥52万',
                route: '澳门→广州→长沙→南昌→上海',
                specialRequirements: ['超宽超重运输许可', '长江大桥限行时段'],
                riskLevel: 'low'
              },
              {
                from: '澳门',
                to: '广州',
                distance: '150公里',
                estimatedTime: '3天',
                cost: '¥8万',
                route: '澳门→珠海→中山→广州',
                specialRequirements: ['珠港澳大桥通行证'],
                riskLevel: 'low'
              },
              {
                from: '澳门',
                to: '深圳',
                distance: '80公里',
                estimatedTime: '2天',
                cost: '¥5万',
                route: '澳门→珠海→深圳',
                specialRequirements: ['港珠澳大桥通行证'],
                riskLevel: 'low'
              }
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 2800)
    }

    const equipmentInventoryManagement = () => {
      window.location.href = '#/policy-detail?type=equipment_inventory'
      addNotification('正在打开设备清单管理系统...', 'info')
    }

    const timeSchedulePlanning = async () => {
      isLoading.value = true
      addNotification('正在制定时间进度安排...', 'info')
      
      setTimeout(() => {
        alert('时间进度安排已制定！\n\n总体时间表：\n• 第1-2周：许可申请提交\n• 第3-4周：设备运输准备\n• 第5-6周：场地搭建\n• 第7周：安全检查\n• 第8周：正式开业\n\n详细计划已发送至项目管理系统')
        isLoading.value = false
        addNotification('时间进度安排已制定完成', 'success')
      }, 2500)
    }

    // 风险管控功能
    const safetyInspectionSystem = async () => {
      isLoading.value = true
      addNotification('正在启动安全检查系统...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '安全检查系统',
          type: 'safety_inspection',
          data: {
            inspectionItems: [
              {
                category: '设备安全',
                items: [
                  { name: '大型游乐设施结构检查', status: 'completed', score: 98 },
                  { name: '电气系统安全检测', status: 'completed', score: 95 },
                  { name: '机械运转测试', status: 'pending', score: 0 },
                  { name: '紧急制动系统测试', status: 'pending', score: 0 }
                ]
              },
              {
                category: '消防安全',
                items: [
                  { name: '消防设施配置检查', status: 'completed', score: 92 },
                  { name: '疏散通道评估', status: 'completed', score: 89 },
                  { name: '消防演练准备', status: 'pending', score: 0 },
                  { name: '应急预案制定', status: 'pending', score: 0 }
                ]
              },
              {
                category: '环境安全',
                items: [
                  { name: '噪音污染检测', status: 'completed', score: 85 },
                  { name: '环保设施检查', status: 'completed', score: 91 },
                  { name: '废料处理方案', status: 'pending', score: 0 },
                  { name: '环境影响评估', status: 'pending', score: 0 }
                ]
              }
            ],
            overallScore: 76,
            recommendations: [
              '加快机械运转测试进度',
              '完善消防演练方案',
              '提交环保处理方案'
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 2200)
    }

    const emergencyPlanDevelopment = async () => {
      isLoading.value = true
      addNotification('正在制定应急预案...', 'info')
      
      setTimeout(() => {
        alert('应急预案制定完成！\n\n包含内容：\n• 设备故障应急处理\n• 人员疏散预案\n• 医疗救护安排\n• 恶劣天气应对\n• 安全事故处理流程\n\n预案已提交相关部门审核')
        isLoading.value = false
        addNotification('应急预案已制定完成', 'success')
      }, 2000)
    }

    const insuranceConfigurationManagement = async () => {
      isLoading.value = true
      addNotification('正在配置保险方案...', 'info')
      
      setTimeout(() => {
        modalContent.value = {
          title: '保险配置管理',
          type: 'insurance_config',
          data: {
            insurancePackages: [
              {
                type: '公众责任险',
                coverage: '¥2,000万',
                premium: '¥15万/年',
                scope: '因设备故障造成的人身伤害',
                provider: '中国人保',
                status: 'active'
              },
              {
                type: '设备财产险',
                coverage: '¥5,000万',
                premium: '¥25万/年',
                scope: '游乐设备损坏、丢失等财产损失',
                provider: '太平洋保险',
                status: 'active'
              },
              {
                type: '营业中断险',
                coverage: '¥800万',
                premium: '¥8万/年',
                scope: '因意外事故导致的营业中断损失',
                provider: '平安保险',
                status: 'pending'
              },
              {
                type: '雇主责任险',
                coverage: '¥300万',
                premium: '¥5万/年',
                scope: '员工工伤赔偿',
                provider: '中国人寿',
                status: 'active'
              }
            ],
            totalCoverage: '¥8,100万',
            totalPremium: '¥53万/年',
            recommendations: [
              '建议增加天气险保障',
              '考虑提高营业中断险额度',
              '定期评估保险额度是否充足'
            ]
          }
        }
        showModal.value = true
        isLoading.value = false
      }, 2000)
    }

    // 智能助手功能
    const bestVenueRecommendation = () => {
      window.location.href = '#/region-compare?focus=venues'
      addNotification('正在分析最佳场地推荐...', 'info')
    }

    const eventTimeOptimization = async () => {
      isLoading.value = true
      addNotification('正在优化活动时间安排...', 'info')
      
      setTimeout(() => {
        alert('活动时间优化完成！\n\n推荐方案：\n• 北京：4月-6月（避开两会和国庆）\n• 上海：3月-5月（避开梅雨季节）\n• 广州：11月-次年1月（天气最佳）\n• 深圳：10月-12月（避开台风季）\n\n详细分析已发送至邮箱')
        isLoading.value = false
        addNotification('活动时间优化方案已完成', 'success')
      }, 2500)
    }

    const costBudgetAnalysis = async () => {
      isLoading.value = true
      addNotification('正在进行成本预算分析...', 'info')
      
      setTimeout(() => {
        const budgetAnalysis = {
          analysisDate: new Date().toLocaleDateString(),
          totalBudget: '¥703万',
          breakdown: {
            transport: '¥275万 (39%)',
            venue: '¥168万 (24%)',
            personnel: '¥95万 (13%)',
            permits: '¥35万 (5%)',
            insurance: '¥42万 (6%)',
            marketing: '¥88万 (13%)'
          },
          projectedRevenue: '¥1,088万',
          projectedProfit: '¥385万',
          profitMargin: '35.4%',
          riskFactors: [
            '天气影响可能导致5-10%收入波动',
            '竞争对手活动可能影响客流',
            '政策变化可能增加合规成本'
          ],
          recommendations: [
            '设立10%应急资金',
            '制定恶劣天气应对方案',
            '加强营销推广投入'
          ]
        }
        
        const blob = new Blob([JSON.stringify(budgetAnalysis, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `成本预算分析报告_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('成本预算分析报告已生成并下载', 'success')
      }, 2200)
    }

    const generateComprehensiveReport = async () => {
      isLoading.value = true
      addNotification('正在生成综合报告...', 'info')
      
      setTimeout(() => {
        const comprehensiveReport = {
          reportTitle: '澳门主题乐园大陆巡展综合报告',
          reportDate: new Date().toLocaleDateString(),
          executiveSummary: {
            totalInvestment: '¥703万',
            projectedRevenue: '¥1,088万',
            projectedProfit: '¥385万',
            profitMargin: '35.4%',
            tourCities: 4,
            estimatedVisitors: 850000,
            projectDuration: '8个月'
          },
          riskAssessment: {
            overallRisk: 'Medium',
            keyRisks: [
              '天气因素影响',
              '政策变化风险',
              '竞争对手威胁',
              '设备运输风险'
            ],
            mitigationStrategies: [
              '购买全面保险',
              '制定应急预案',
              '加强市场调研',
              '建立备用方案'
            ]
          },
          recommendations: [
            '优先选择上海和北京作为首发城市',
            '建议错开当地大型活动时间',
            '加强与当地政府的沟通协调',
            '建立完善的客户服务体系'
          ],
          nextSteps: [
            '提交各城市许可申请',
            '确认场地预订',
            '启动设备运输准备',
            '开展市场推广活动'
          ]
        }
        
        const blob = new Blob([JSON.stringify(comprehensiveReport, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `澳门主题乐园巡展综合报告_${new Date().toLocaleDateString()}.json`
        a.click()
        
        isLoading.value = false
        addNotification('综合报告已生成并下载', 'success')
      }, 3000)
    }

    const closeModal = () => {
      showModal.value = false
      modalContent.value = null
    }

    const openCustomAgent = () => {
      // 打开企业定制化agent页面
      window.open('http://124.70.207.197/', '_blank')
      addNotification('正在打开企业定制化agent...', 'info')
    }

    // Set default selected city
    selectedCity.value = cities[0]
    
    // 初始化欢迎消息
    setTimeout(() => {
      addNotification('欢迎使用澳门主题乐园智能活动管理系统', 'success')
    }, 1000)
    
    return {
      themeState,
      selectedCity,
      cities,
      permitStatus,
      documentCategories,
      notifications,
      isLoading,
      showModal,
      modalContent,
      
      // 许可申请
      oneClickApplication,
      trackProgress,
      assessApprovalRisk,
      
      // 场地管理
      venueBookingSystem,
      venueCompatibilityAnalysis,
      venueEvaluationReport,
      
      // 物流协调
      transportRoutePlanning,
      equipmentInventoryManagement,
      timeSchedulePlanning,
      
      // 风险管控
      safetyInspectionSystem,
      emergencyPlanDevelopment,
      insuranceConfigurationManagement,
      
      // 智能助手
      bestVenueRecommendation,
      eventTimeOptimization,
      costBudgetAnalysis,
      generateComprehensiveReport,
      
      closeModal,
      addNotification,
      openCustomAgent
    }
  }
}
</script>

<style scoped>
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.text-electric-500 {
  color: #60a5fa;
}

.bg-electric-500 {
  background-color: #60a5fa;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 165, 250, 0.7);
}
</style> 